<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 
        v-red指令，它可以让标题变成红色  v-red它是不是内置指令，需要开发者去定义
       -->
      <div v-red>{{title}}</div>
      <input type="text" v-model="title" />
    </div>
    <script>
      // 自定义指令它其实本质就是操作dom
      // 自定义指令分为 全局指令 和 局部指令
      // 全局指令的定义方式和局部指令定义的方式是一样的，只是使用的区域范围不一样
      const app = Vue.createApp({
        data() {
          return {
            title: '我是一个标题!'
          }
        }
      })

      // 定义全局指令
      // 参数1：自定义指令的名称，不要加 v-  例：自定义指令为 v-red ，参数1就要写成  red
      // 参数2：回调函数[对象方式简写 mounted/updated]  -- 可能用的多
      app.directive('red', (el) => {
        console.log('m/u')
        el.style.color = 'blue'
      })

      app.mount('#app')
    </script>
  </body>
</html>
